<template>
    <div>
        <div class="title-wrapper">
            <div class="title">
                <span class="back" @click="back">
                    <Icon type="ios-arrow-back" size="22"/>
                    <span>返回</span>
                </span>
                <Breadcrumb style="color: black">
                    <BreadcrumbItem>{{user.nickName}}</BreadcrumbItem>
                </Breadcrumb>
                <div class="search">
                    <DatePicker type="date"
                                :value="day"
                                @on-change='handleChange'
                                placeholder="Select date"
                                style="width: 200px;margin-right: 5px">
                    </DatePicker>
                </div>
            </div>
        </div>
        <Table border :columns="columns" :data="tableData">
            <template slot-scope="{row}" slot="action">
                <Button type="primary"
                        size="small"
                        class="option"
                        @click="present(row)" v-if="row.status<1">
                    打卡
                </Button>
                <Button size="small" class="option" @click="absent(row)" v-if="row.status<1">缺勤</Button>
                <Button size="small" type="success" @click="reset(row)" v-if="row.status>0">重置</Button>
            </template>
        </Table>
    </div>
</template>

<script>
    import {clockRecord, getRecord, reset} from '../request/api'

    export default {
        name: "Clock",
        data() {
            return {
                day: new Date().getFullYear() + '-' +
                    (new Date().getMonth() + 1 < 10 ? ('0' + (new Date().getMonth() + 1)) : (new Date().getMonth() + 1)) + '-' +
                    (new Date().getDate() + 1 < 10 ? ('0' + new Date().getDate()) : (new Date().getDate())),
                value: '',
                isSearch: true,
                user: this.$route.query,
                teachingId: this.$route.query.teachingId,
                teachingList: [],
                columns: [
                    {
                        title: '学生姓名',
                        key: 'student',
                    }, {
                        title: '日期',
                        key: 'day',
                    }, {
                        title: '考勤',
                        key: 'status',
                        align: 'center',
                        render: (h, params) => {
                            if (params.row.status == 1) {
                                return h('span', {
                                    style: {
                                        color: 'green'
                                    }
                                }, "√");
                            } else {
                                if (null == params.row.remark || params.row.remark.trim() == '') {
                                    return h('span', {
                                        style: {
                                            color: 'red'
                                        }
                                    }, "");
                                } else {
                                    return h('span', {
                                        style: {
                                            color: 'red'
                                        }
                                    }, params.row.remark);
                                }

                            }
                        }
                    }, {
                        title: '操作',
                        slot: 'action',
                        width: 150,
                        align: 'left'
                    }
                ],
                tableData: [
                    {
                        id: 1,
                        student: '张三'
                    }, {
                        id: 2,
                        student: '李四'
                    }
                ]
            }
        },
        created() {
            this.getRecord();
        },
        methods: {
            present(row) {
                let studentRecord = Object.assign({}, row);
                studentRecord.status = 1;
                this.clockRecord(studentRecord);
            },
            absent(row) {
                this.$Modal.confirm({
                    render: (h) => {
                        return h('Input', {
                            props: {
                                value: this.value,
                                autofocus: true,
                                placeholder: '缺勤说明'
                            },
                            on: {
                                input: (val) => {
                                    this.value = val;
                                },
                            },
                        })
                    },
                    onOk: () => {
                        window.console.log(row);
                        let studentRecord = Object.assign({}, row);
                        studentRecord.status = 2;
                        studentRecord.remark = this.value;
                        this.clockRecord(studentRecord);
                        this.value = "";
                    }
                })
            },
            getRecord() {
                if (this.day && this.teachingId) {
                    console.log(this.day);
                    getRecord({
                        day: this.day,
                        teachingId: this.teachingId,
                    }).then((res) => {
                        this.tableData = res.data;
                    })
                }
            },
            reset(row) {
                reset(row.id).then(() => {
                    this.getRecord();
                })
            },
            clockRecord(record) {
                clockRecord(record).then((res) => {
                    if (res.code == 200) {
                        this.getRecord();
                    }
                })
            },
            back() {
                this.$router.back(-1);
            },
            handleChange(daterange) {
                this.day = daterange;//这样value的值就是日期
                this.getRecord();
            }
        }
    }
</script>

<style scoped>
    .title {
        display: flex;
        align-items: center;
        height: 46px;
        justify-content: space-between;
    }

    .back {
        color: blue;
        margin-right: 30px;
    }

    .option {
        margin-right: 10px;
    }
</style>
